<template name="datetimePicker">
	<view class="picker-view">
		<picker mode="multiSelector" :value="datetimeIndex" :range="datetimes" range-key="value" @columnchange="changeColumn">
                <view class="row-arrange">
					<text v-if="precision >> 4 & 1 == 1">{{datetimes[0][datetimeIndex[0]].value}}</text>
					<text v-if="precision >> 4 & 1 == 1 && precision >> 3 & 1 == 1" class="normal-font-size">-</text> 
					<text v-if="precision >> 3 & 1 == 1">{{datetimes[1][datetimeIndex[1]].value}}</text>
					<text v-if="precision >> 3 & 1 == 1 && precision >> 2 & 1 == 1" class="normal-font-size">-</text> 
					<!-- <text>
						<text v-if="this.precision >> 2 & 1 == 1">{{datetimes[2][datetimeIndex[2]]}}</text>
						&nbsp;&nbsp;
						<text v-if="this.precision >> 1 & 1 == 1">{{datetimes[3][datetimeIndex[3]]}}</text>
					</text> -->
					<text>{{precision >> 2 & 1 == 1 ? datetimes[2][datetimeIndex[2]].value : ''}}&nbsp;{{precision >> 1 & 1 == 1 ? datetimes[3][datetimeIndex[3]].value : ''}}</text>
					<text v-if="precision & 1 == 1 && precision >> 1 & 1 == 1" class="normal-font-size">:</text>
					<text v-if="precision & 1 == 1">{{datetimes[4][datetimeIndex[4]].value}}</text>
					
				</view>
        </picker>
	</view>
</template>

<script>
	export default {
		name : "datetimePicker",
		data() {
            
			return {
                datetimes : [],
				dayNum : [],
                datetimeIndex : []
			};
		},
		props : {
			precision : {
				type : Number,
				// value : true，
				default : 31
			}
        },
        created : function(){
            // console.log("? ??")
			const date = new Date();
			var dayNum = [31,date.getFullYear()%4==0?29:28,31,30,31,30,31,31,30,31,30,31]
			this.dayNum = dayNum;
			if(this.precision >> 4 & 1 == 1){
				var year = [];
				for(var i=1901;i<=2099;i++){
                	year.push({'value':i});
				}
				this.datetimes.push(year);
            	this.datetimeIndex.push(date.getFullYear() - 1901); 
			}else{
				this.datetimes.push([]);
            	this.datetimeIndex.push(0); 
			}
			
            if(this.precision >> 3 & 1 == 1){
				var month = [];
				for(var i=1;i<=12;i++){
					month.push({'value':i<10?'0'+i:i});
				}
				this.datetimes.push(month);
				this.datetimeIndex.push(date.getMonth());
			}else{
				this.datetimes.push([]);
            	this.datetimeIndex.push(0); 
			}
			// console.log(this.datetimes)
			if(this.precision >> 2 & 1 == 1){
				var day = [];
				for(var i=1;i<=dayNum[date.getMonth()];i++){
					day.push({'value':i<10?'0'+i:i});
				}
				this.datetimes.push(day);
				this.datetimeIndex.push(date.getDate()-1);
			}else{
				this.datetimes.push([]);
            	this.datetimeIndex.push(0); 
			}
			if(this.precision >> 1 & 1 == 1){
				var hour = [];
				for(var i=0;i<=23;i++){
					hour.push({'value':i<10?'0'+i:i});
				}
				this.datetimes.push(hour);
				this.datetimeIndex.push(date.getHours());
			}else{
				this.datetimes.push([]);
            	this.datetimeIndex.push(0); 
			}
			if(this.precision & 1 == 1){
				var minute = [];
				for(var i=0;i<=59;i++){
					minute.push({'value':i<10?'0'+i:i});
				}
				this.datetimes.push(minute);
				this.datetimeIndex.push(date.getMinutes());
			}else{
				this.datetimes.push([]);
            	this.datetimeIndex.push(0); 
			}
			// console.log(this.datetimes)
        },
		methods: {
			
			get : function(){
				// console.log('??')
				var res = {};
				var level = ['year','month','day','hour','minute'];
				for(var i=0;i<5;i++){
					if(this.precision >> (4 - i) & 1 == 1){
						res[level[i]] = this.datetimes[i][this.datetimeIndex[i]].value;
					}
				}
				return res;
				// return "???"
			},
			changeColumn : function(e){
				// console.log(e)
				var columnId = e.detail.column;
				var value = e.detail.value;
				var day = [];
				if(columnId == 0){
					if(this.datetimes[0][value].value % 4 == 0){
						this.dayNum[1] = 29;
					}else{
						this.dayNum[1] = 28;
					}
					if(this.datetimeIndex[1] == 1){
						for(var i=1;i<=this.dayNum[1];i++){
							day.push({'value':i < 10 ? '0'+i:i});
						}
						this.datetimes[2] = day;
					}
				}
				if(columnId == 1){
					for(var i=1;i<=this.dayNum[value];i++){
						day.push({'value':i < 10 ? '0'+i:i});
					}
					this.datetimes[2] = day;
				}
				this.datetimeIndex.splice(columnId,1,value); //[columnId] = value;
			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	/* #answer-view{
		flex-direction: row;
	} */
	text{
		/* margin-left : 0%; */
		font-size: 40upx;
	}
</style>
